import { useThemeStore } from '@/store/modules/theme'
import { ChartTheme, ChartThemeDark } from 'ele-admin-plus'
import { storeToRefs } from 'pinia'
import {
  nextTick,
  onActivated,
  onDeactivated,
  provide,
  reactive,
  ref,
  unref,
  watch,
} from 'vue'
import { THEME_KEY } from 'vue-echarts'
import { useBodyResize } from './use-body-resize'

/**
 * echarts自动切换主题/重置尺寸hook
 * @param refs 图表ref
 */
export function useEcharts(refs) {
  /** 是否是暗黑主题 */
  const themeStore = useThemeStore()
  const { darkMode } = storeToRefs(themeStore)
  /** 是否为deactivated状态 */
  const deactivated = ref(false)
  /** 当前图表是否是暗黑主题 */
  const isDark = ref(unref(darkMode))
  /** 当前图表主题 */
  const chartsTheme = reactive({
    ...(unref(isDark) ? ChartThemeDark : ChartTheme),
  })

  // 设置图表主题
  provide(THEME_KEY, chartsTheme)

  /** 重置图表尺寸 */
  function resizeCharts() {
    refs.forEach((chartRef) => {
      unref(chartRef)?.resize?.()
    })
  }

  /** 屏幕尺寸变化监听 */
  useBodyResize(() => {
    if (!unref(deactivated)) {
      resizeCharts()
    }
  })

  /** 更改图表主题 */
  function changeTheme(dark) {
    isDark.value = dark
    Object.assign(chartsTheme, dark ? ChartThemeDark : ChartTheme)
  }

  onActivated(() => {
    deactivated.value = false
    nextTick(() => {
      if (unref(isDark) !== unref(darkMode)) {
        changeTheme(unref(darkMode))
      }
      else {
        resizeCharts()
      }
    })
  })

  onDeactivated(() => {
    deactivated.value = true
  })

  watch(darkMode, (dark) => {
    if (!unref(deactivated)) {
      changeTheme(dark)
    }
  })
}
